<template>
  <BgVue4 class="staticRecord">
    <template #imgFixed>
      <img src="@/assets/imgV2/exchange-bg-bottom.jpg" />
    </template>
    <div class="title-style title">{{ t('recharge.RechargeRecord') }}</div>
    <div class="block-bor" v-for="(item, index) in list" :key="index">
      <BoxView2>
        <div class="block-item-head">
          <van-cell :border="false">
            <template #title>
              <div class="text">{{ t('recharge.CZLX') }}</div>
            </template>
            <template #value>
              <div class="text-right">{{ item.type }}</div>
            </template>
          </van-cell>
          <van-cell :border="false">
            <template #title>
              <div class="text">{{ t('recharge.CS') }}</div>
            </template>
            <template #value>
              <div class="text-right">{{ item.num }}</div>
            </template>
          </van-cell>
          <van-cell :border="false">
            <template #title>
              <div class="text">{{ item.time }}</div>
            </template>
            <template #value>
              <div class="text-right">
                {{ item.statusStr }}
                <!--              <span class="col-yellow" v-if="item.status==1">取消</span>-->
              </div>
            </template>
          </van-cell>
          <template v-if="item.remark">
            <div class="bor"></div>
            <van-cell :border="false">
              <template #title>
                <div class="marT text-right col-grey">{{ item.remark }}</div>
              </template>
            </van-cell>
          </template>
        </div>
      </BoxView2>
    </div>
  </BgVue4>
</template>
<script>
import { store } from '@/store'
import http from '../http'
import BoxView2 from '@/components/BoxView2.vue'
import BgVue4 from '@/components/BgVue4.vue'

export default {
  data() {
    return {
      list: [],
    }
  },
  computed: {
    locale() {
      return store.state.value['app-locale'].localInfo.locale
    },
  },
  watch: {
    locale() {
      this.init()
    },
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      const coinIds = {
        PT: 1,
        PLAY: 2,
      }
      const coin = this.$route.query.coin
      var coinId = coinIds[coin]
      if (coinId) {
        const res = await http.get(`/api/user/coinLog?type=0&coinId=${coinId}`)
        if (process.env.NODE_ENV !== 'production') {
          this.list = [
            {
              type: 1,
              num: 2,
              time: '2020-2-2 00:00:00',
              statusStr: this.t('recharge.SuccessfulRecharge'),
            },
            // {
            //   type: 1,
            //   num: 2,
            //   time: '2020-2-2 00:00:00',
            //   statusStr: this.t('recharge.SuccessfulRecharge'),
            // },
            // {
            //   type: 1,
            //   num: 2,
            //   time: '2020-2-2 00:00:00',
            //   statusStr: this.t('recharge.SuccessfulRecharge'),
            // },
            // {
            //   type: 1,
            //   num: 2,
            //   time: '2020-2-2 00:00:00',
            //   statusStr: this.t('recharge.SuccessfulRecharge'),
            // },
            // {
            //   type: 1,
            //   num: 2,
            //   time: '2020-2-2 00:00:00',
            //   statusStr: this.t('recharge.SuccessfulRecharge'),
            // },
          ]
        }
        if (res.code === 200) {
          this.list = res.data.map((row) => {
            return {
              type: coin,
              num: row.amount,
              time: row.create_time.substr(0, 16).replace('T', ' '),
              statusStr: this.t('recharge.SuccessfulRecharge'),
              // status: 4,
              // remark: "撤销备注：暂停提现功能"
            }
          })
        }
      }
    },
  },
  components: { BoxView2, BgVue4 },
}
</script>
<style lang="less" scoped>
.staticRecord {
  text-align: left;

  .title {
    // position: relative;
    // display: inline-block;
    padding: 10px 0 0;
    // margin: 14px 15px 5px 15px;
    // color: #ffffff;
    font-size: 22px;
    text-align: center;
    // font-weight: 400;
  }

  // .title::after {
  //   position: absolute;
  //   left: 50%;
  //   bottom: 0;
  //   display: block;
  //   width: 50px;
  //   height: 2px;
  //   background: #e7a20d;
  //   content: '';
  //   transform: translateX(-50%);
  // }

  .van-cell {
    align-items: center;
    height: 30px;
    padding: 0 15px;
    background: transparent;
  }

  .text {
    color: #fff;
    font-size: 14px;
    line-height: 20px;
  }

  .text-right {
    color: #f7cc40;
    font-size: 13px;
    line-height: 18px;
  }

  .col-yellow {
    position: relative;
    color: #f9a614;
    padding-left: 16px;
  }

  .col-yellow::before {
    position: absolute;
    left: 8px;
    top: 50%;
    z-index: 2222222;
    display: block;
    width: 1px;
    height: 12px;
    background: #f9a614;
    content: '';
    transform: translateY(-50%);
  }

  .bor {
    height: 1px;
    background: #333036;
    margin-top: 9px;
  }

  .marT {
    margin-top: 15px;
  }
}
</style>
